<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<header class="navbar navbar-inverse">
    <div class="navbar-inner remove-radius remove-box-shadow">
        <div class="container-fluid">

            <ul class="nav pull-right visible-phone visible-tablet">
                <li class="divider-vertical remove-margin"></li>
                <li> <a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse"> <i class="icon-reorder"></i> </a> </li>
            </ul>

            <a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>

            <div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>

            <ul id="widgets" class="nav pull-right">         

                <li class="divider-vertical remove-margin"></li>

                <!--****************************************** Messages ********************************************!-->
                <li id="messages-widget" class="dropdown dropdown-left-responsive"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-envelope"></i> <span class="badge badge-success">2</span> </a>

                    <ul class="dropdown-menu widget pull-right">
                        <li class="widget-heading"><i class="icon-comment pull-right"></i>Derniers Messages</li>
                        <li class="new-on">

                            <div class="media"> <a class="pull-left" href="javascript:void(0)"> <img src="img/placeholders/image_light_64x64.png" alt="fakeimg" /> </a>
                                <div class="media-body">
                                    <h6 class="media-heading"><a href="javascript:void(0)">Sidy</a><span class="label label-success">2 min ago</span></h6>
                                    <div class="media">Il y a un restaurant à repertorier!</div>
                                </div>
                            </div>

                        </li>

                        <li class="divider"></li>
                        <li>
                            <div class="media"> <a class="pull-left" href="javascript:void(0)"> <img src="img/placeholders/image_light_64x64.png" alt="fakeimg" /> </a>
                                <div class="media-body">
                                    <h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
                                    <div class="media">The logo is ready, have a look and let me know what you think!</div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li class="text-center"><a href="javascript:void(0)">Tous les Messages</a></li>
                    </ul>
                </li>
                <!--****************************************** Messages ********************************************!-->


                <li class="divider-vertical remove-margin"></li>

                <!--****************************************** Notifications ********************************************!-->

                <li id="notifications-widget" class="dropdown dropdown-center-responsive"> 
                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> 
                        <i class="icon-flag"></i> 
                        <span class="badge badge-important">1</span> 
                        <span class="badge badge-warning">2</span> 
                    </a>
                    <ul class="dropdown-menu widget">
                        <li class="widget-heading">
                            <a href="javascript:void(0)" class="pull-right widget-link">
                                <i class="icon-cog"></i>
                            </a>
                            <a href="javascript:void(0)" class="widget-link">Important</a>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-important">20 min ago</li>
                                <li class="text-error">Fiche pharmacie signalé</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-warning">3 hours ago</li>
                                <li class="text-warning">PHP upgrade started!</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-warning">5 hours ago</li>
                                <li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
                            </ul>
                        </li>
                        <li class="widget-heading">
                            <a href="javascript:void(0)" class="pull-right widget-link">
                                <i class="icon-bookmark"></i>
                            </a>
                            <a href="javascript:void(0)" class="widget-link">Autres</a>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-success">3 weeks ago</li>
                                <li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-info">1 month ago</li>
                                <li class="text-info">Milestone #3 achieved!</li>
                                <li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label">1 year ago</li>
                                <li class="text-muted">This is an old notification</li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li class="text-center"><a href="javascript:void(0)">Toutes les notifications</a></li>
                    </ul>
                </li>

                <!--****************************************** Notifications ********************************************!-->


                <li class="divider-vertical remove-margin"></li>

                <!--****************************************** Session utilisateur ********************************************!-->

                <li class="dropdown dropdown-user"> 

                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="img/template/avatar.png" alt="avatar" /> 
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li> 
                            <a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Actualiser</a> 
                        </li>
                        <li class="divider"></li>

                        <li> 
                            <a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> Profile</a> 
                        </li>

                        <li> <a href="javascript:void(0)"><i class="icon-wrench"></i> Paramètres</a> </li>

                        <li class="divider"></li>

                        <li> <a href="page_login.php"><i class="icon-lock"></i>Quitter</a> </li>

                    </ul>
                </li>

                <!--****************************************** Session utilisateur ********************************************!-->

            </ul>
        </div>
    </div>
</header>
</ui:composition>